<template>
  <!-- 下载弹窗 -->
  <div class="center">
      <div class="mui-popover mui-active">
        <div  class="title" style="width:100%;text-align:left">正在升级,请耐心等待...</div>
        <div style="width:80%;">
          <div id="demo1" class="mui-progressbar">
            <span></span>
          </div>
          <p class="percent">{{percent}}%</p>
        </div>
        <div class="update">升级中</div>
      </div>
      <div class="mui-backdrop"></div>
  </div>
</template>
<script>
import mui from 'static/js/mui'
export default {
    data() {
        return {
              chat: false,
              percent: ''
        }
    },
    props: {
      // 父组件传状态
      downData: {
        type: Object
      }
    },
    created() {
      try{
        mui('#demo1').progressbar({progress:0}).show();
      }catch(r){
        //console.log('逻辑错误')
      }
        //this.percent = parseInt((this.downData.downloadedSize / this.downData.totalSize) * 100)
     },
     watch:{
        downData:{
          handler(newValue, oldValue) {
            try{
              this.percent = parseInt((newValue.downloadedSize / oldValue.totalSize) * 100)
              mui('#demo1').progressbar().setProgress(this.percent);
            }catch(r){
              //console.log('逻辑错误')
            }
             ////console.log(this.percent)
          },
          deep: true
        }
    },
    //注意销毁掉监听，不然报错
    destroyed() {
        //   window.removeEventListener('scroll',  
        //     this.handleNavSwitch,false
        //   ) 
    },
    components: {},
    methods: {  
      
      goOut(index) {
         plus.runtime.quit();
      }
    },
    mounted() {
        
    }
}
</script>

<style scoped>
  /* 遮罩 */
  .center {
      position: absolute;
      left: 50%;
      margin-left: -140px;
      top:35%;
      height:190px;
  }
  /* 聊天弹窗 */
  .chatCenter{
    margin-top:210px;
  }
  /* 联系弹窗 */
  .icon-cha{
      color:#333333;
      font-size:12px;
      float:right;
      position: absolute;
      top:8px;
      right:10px;
      height:12px;
      width:12px;
      line-height: 12px;
  }
  .mui-table-view-cell{
    text-align: center;  
    height:60px;
    vertical-align:middle;
    line-height: 35px;
  }
  .icon-fanhui{
    color:#999999;
    top:24px;
    font-size:14px;
    margin-left:5px;
    position: absolute;
    transform:rotate(270deg);
  }
  .mui-popover{
    background-color: white;  
  }
  .title{
    margin-left:8%;
    margin-top:20px;
    font-size:15px;
  }
  #demo1{
   width:90%;
   margin-top:20px;
   margin-left:10%;
  
  }
  .percent{
    position: absolute;
    right:25px;
    top:50px;
    font-size:12px;
    color:#999999;
  }
  .update{
    width:90%;
    margin-top:10px;
    margin-bottom:20px;
    padding-left:8%;
    font-size:12px;
    color:#999999;
  }
</style>